<template>
  <!-- 任务页面 -->
  <el-drawer
    :visible.sync="visible"
    direction="rtl"
    size="50%"
    :close-on-press-escape="false"
    :wrapper-closable="false"
    :show-close="false"
  >
    <template v-slot:title>
      <div class="drawer-header">
        <span>任务列表</span>
        <div>
          <el-button icon="el-icon-close" @click="handleClose">
            取消
          </el-button>
        </div>
      </div>
    </template>
    <div class="app-container">
      <div class="filter-container">
        <div style="float: right;">
          <el-button icon="el-icon-refresh" circle @click="handleFilterQuery" />
        </div>
      </div>

      <!-- 数据表格 -->
      <el-table
        :key="tableKey"
        v-loading="loading"
        :data="list"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        scrollbar-always-on="true"
      >
        <el-table-column label="序号" type="index" width="50px" align="center" />
        <el-table-column label="流程名称" min-width="120px" align="left">
          <template v-slot="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <!--        <el-table-column label="业务流水号" min-width="120px" align="left">-->
        <!--          <template v-slot="{row}">-->
        <!--            <span>{{ row.bizKey }}</span>-->
        <!--          </template>-->
        <!--        </el-table-column>-->
        <el-table-column label="任务节点" min-width="120px" align="left">
          <template v-slot="{row}">
            <span>{{ row.taskName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="代理人" min-width="70px" align="left">
          <template v-slot="{row}">
            <span>{{ convertUser(row.assignee, users) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="开始时间" width="140px" align="left">
          <template v-slot="{row}">
            <span>{{ row.createTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </template>
        </el-table-column>
        <el-table-column label="持续时间（s）" min-width="90px" align="left">
          <template v-slot="{row}">
            <span>{{ row.duration / 1000 }}s</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" fixed="right" width="93px" class-name="small-padding fixed-width">
          <template v-slot="{row,$index}">
            <el-button size="mini" type="primary" icon="el-icon-user" @click="handleExec(row, $index)">变更</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 表格分页 -->
      <pagination :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="handleInit" />

      <!-- 用户选择器组件 -->
      <ft-user-dialog ref="userSelector" @select="handleUserSelector" />
    </div>
  </el-drawer>
</template>

<script>
import { handleGetTask, handleDelegate, handleAssign } from '@/views/flow/api/task'
import { handleGetAllUserList } from '@/views/sys/userInfo/api'
import permission from '@/directive/permission/index' // 权限判断指令
// import checkPermission from '@/utils/permission' // 权限判断函数
import { convertUser } from '@/utils'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination'
import FtUserDialog from '@/views/components/FtUserDialog/index.vue'

export default {
  // 当前页面名称（组件）
  name: 'FlowInstanceTask',
  // 引用组件
  components: { Pagination, FtUserDialog },
  directives: { permission, waves },
  filters: {},
  // props属性
  props: {
    params: {
      type: Object,
      require: true,
      default: undefined
    }
  },
  data() {
    return {
      // 列表table的key
      tableKey: 0,
      // 遮罩层
      loading: true,
      // table数据对象
      list: [],
      // 总条数
      total: 0,
      // table条件查询对象
      listQuery: {
        pageNum: 1,
        pageSize: 10,
        param: {
          procInstId: undefined
        }
      },
      // 表单数据对象
      formData: {},
      // 是否显示弹出层
      visible: false,
      // 弹出层状态值（新增和修改共用同一个表单页面）
      state: '',
      users: [],
      opType: undefined,
      opRow: undefined
    }
  },
  computed: {},
  watch: {},
  created() {
    this.handleInit()
    handleGetAllUserList().then(res => {
      this.users = res.data
    })
  },
  mounted() {},
  methods: {
    convertUser,
    // 查询table数据对象
    handleInit() {
      this.opType = this.params.opType
      this.visible = this.params.visible
      this.listQuery.param.procInstId = this.params.procInstId
      this.loading = true
      handleGetTask(this.listQuery).then(res => {
        this.list = res.data
        if (res.total) {
          this.total = Number(res.total)
        }
        this.loading = false
      })
    },
    // 条件查询table数据
    handleFilterQuery() {
      this.listQuery.pageNum = 1
      this.handleInit()
    },
    // 更多点击操作项
    handleExec(row) {
      this.opRow = row
      this.$refs.userSelector.open()
    },
    // 获取选中的用户
    handleUserSelector(data) {
      // 委派
      if (this.opType === 'delegate') {
        handleDelegate({ taskId: this.opRow.taskId, assignee: data.userId }).then((res) => {
          //  刷新table
          this.handleFilterQuery()
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success',
            duration: 4000
          })
        })
      }
      // 指派
      if (this.opType === 'assign') {
        handleAssign({ taskId: this.opRow.taskId, assignee: data.userId }).then((res) => {
          //  刷新table
          this.handleFilterQuery()
          this.$message({
            showClose: true,
            message: res.msg,
            type: 'success',
            duration: 4000
          })
        })
      }
    },
    // 关闭弹出层
    handleClose() {
      this.visible = false
    }
  }
}
</script>
